<template>
	<view class="home">
		<!-- 头部导航栏 -->
		<view class="home_nav" :style="{height:(statusBarHeight+45)+'px'}">
			<view class="home_nav_search" @click="Search" :style="{marginTop:(statusBarHeight+35)/2+'px'}">

				<image src="../../../static/image/images/search.png"></image>
				<view class="search">搜索</view>
				
			</view>
		</view>
		<view class="home_content" :style="{marginTop:(statusBarHeight+45)+'px'}">
			<!-- 头部轮播图 -->
			<view class="home_content_swiper">
				<swiper class="search-swiper" autoplay circular interval="3000">
					<swiper-item v-for="(item,index) in swiperImg" :key="index">
						<!-- {{ item.keywords }} -->
						<image :src="$wanlshop.oss(item,360,100)" mode="aspectFill"></image>
					</swiper-item>

				</swiper>

			</view>
			<!-- 分类 -->
			<view class="home_content_classification">
				<!-- 上一层 -->
				<view class="home_content_classification_top">
					<view class="layout_flex" @click="getHomeSearch(item)" v-for="(item,index) in navClass" :key="index">
						<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
						<view class="text">{{item.name}}</view>
					</view>
					<view class="layout_flex" @click="getClassification">
						<image src="../../../static/image/images/moreCategories.png"></image>
						<view class="text">更多分类</view>
					</view>
				</view>
			</view>
			<!-- 3d实景样板房 -->
			<view class="home_content_3D" @click="getModelHouses">
				<image src="../../../static/image/images/modelHouses.png"></image>
			</view>
			<!-- 热度榜口碑榜 -->
			<view class="home_content_Heat">
				<view class="home_content_Heat_list">
					<view class="hot">
						<image src="../../../static/image/images/redubang.png"></image>
						<text>热度榜</text>
					</view>
					<view class="top1" @click="getProductDetaile1">
						<image :src="$wanlshop.oss(sales1,160,65)" mode="aspectFill"></image>
						<view class="top1_postion">
							<image src="../../../static/image/images/TOP1.png"></image>
						</view>
					</view>
					<view class="top_bottom">
						<view class="top_bottom_left" @click="getProductDetaile2">
							<image :src="$wanlshop.oss(sales2)"  mode="aspectFill"></image>
							<view class="top2">
								<image src="../../../static/image/images/TOP2.png"  ></image>
							</view>
						</view>
						<view class="top_bottom_left" @click="getProductDetaile3">
							<image :src="$wanlshop.oss(sales3)" mode="aspectFill"></image>
							<view class="top2">
								<image src="../../../static/image/images/TOP3.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="home_content_Heat_list">
					<view class="hot">
						<image src="../../../static/image/images/redubang.png"></image>
						<text>口碑榜</text>
					</view>
					<view class="top1" @click="getProductDetaile4">

						<image :src="$wanlshop.oss(praise1,160,65)" mode="aspectFill"></image>
						<view class="top1_postion">
							<image src="../../../static/image/images/TOP1.png"></image>
						</view>
					</view>
					<view class="top_bottom">
						<view class="top_bottom_left" @click="getProductDetaile5">
							<image :src="$wanlshop.oss(praise2)" mode="aspectFill"></image>
							<view class="top2">
								<image src="../../../static/image/images/TOP2.png"></image>
							</view>
						</view>
						<view class="top_bottom_left" @click="getProductDetaile6">
							<image :src="$wanlshop.oss(praise3)" mode="aspectFill"></image>
							<view class="top2">
								<image src="../../../static/image/images/TOP3.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="home_bottom">
			<!-- 标题 -->
			<view class="home_bottom_fover">
				<image src="../../../static/image/images/cainixihuan.png" ></image>
			</view>
			<view class="home_bottom_shopping">
				<view class="home_bottom_shopping_shopping1" v-for="(item,index) in likeData" :key="index"
					@click="getProductDetails(item)">
					<image class="image" :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
					<view class="introduce">
						<text>{{item.title}}</text>
					</view>
					<view class="price">
						<view class="price_left" v-if="is_DC==2 ">
							<text class="money1">￥</text>
							<text class="money2">{{item.DCprice.split('.')[0]}}</text>
							<text class="money1">.{{item.DCprice.split('.')[1]}}</text>
							<text class="money3">￥{{item.market_price}}</text>
						
						</view>
						<view class="price_left" v-else>
							<text class="money1">￥</text>
							<text class="money2">{{item.price.split('.')[0]}}</text>
							<text class="money1">.{{item.price.split('.')[1]}}</text>
							<text class="money3">￥{{item.market_price}}</text>

						</view>
						
						<view class="price_right">
							<text>{{item.sales}}购买</text>
						</view>
					</view>
				</view>
			</view>
		</view> 
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				// 导航栏高度
				statusBarHeight: 0,
				navClass: [],
				// 热度榜
				sales1: '',
				sales2: '',
				sales3: '',
				rId1: '',
				rId2: '',
				rId3: '',
				// 口碑榜
				praise1: "",
				praise2: "",
				praise3: "",
				pid1: '',
				pid2: '',
				pid3: '',
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				// 猜你喜欢数据
				likeData: [],
				reload: true,
				// 轮播图图片
				swiperImg: [],
				// 判断是否是ui设计师 0 是客户，1是设计室审核，2是设计师
				is_DC: '',
				url:'/static/image/class/touxiang.png',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}

			};
		},
		computed: {
			...mapState(['user', 'common', 'update'])
		},
		async onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadlikeData();
			}
		},
		methods: {
						
			// 跳转到搜索页面
			Search() {
				uni.navigateTo({
					url: '../home_search/home_search'
				})
				var obj = {
					id: '',
					image: '',
					name: '',
					pid: '',
				}
				this.$store.commit('common/cateSearch', obj);
			},
			// 点击3d样板房跳转到样板房页面
			getModelHouses() {
				uni.navigateTo({
					url: '../modelHouses/modelHouses'
				})
			},
			// 点击分类跳转到搜索页面
			getHomeSearch(item) {
				console.log('item', item)
				uni.navigateTo({
					url: '../home_search/home_search?cateSearch=' + encodeURIComponent(JSON.stringify(item))
				})
				this.$store.commit('common/cateSearch', item);
			},
			// 点击查看更多跳转到分类页面
			getClassification() {
				uni.switchTab({
					url: '../../classifications/classification/classification'
				});
			},
			// 点击商品跳转到商品详情页
			getProductDetails(item) {
				// console.log('商品详情', item);

				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			getProductDetaile1() {
				var obj = {
					id: this.rId1
				}
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getProductDetaile2() {
				var obj = {
					id: this.rId2
				}
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getProductDetaile3() {
				var obj = {
					id: this.rId3
				}
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getProductDetaile4() {
				var obj = {
					id: this.pid1
				}
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getProductDetaile5() {
				var obj = {
					id: this.pid2
				}
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getProductDetaile6() {
				var obj = {
					id: this.pid3
				}
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},

			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						console.log('状态栏高度', res)
					},
				});
			},
			// 导航分类数据
			nav() {
				this.$api.get({
					url: '/wanlshop/common/indexCate',
					data: {
						// page:1
					},
					success: res => {
						console.log('导航分类', res);
						this.navClass = res
					}
				});
			},
			// 热度榜
			getHeatList() {
				this.$api.get({
					url: '/wanlshop/product/otherLists',
					data: {
						// page:1
					},
					success: res => {
						console.log('热度榜', res)
						// 口碑榜
						this.praise1 = res.praise[0].image;
						this.praise2 = res.praise[1].image;
						this.praise3 = res.praise[2].image;
						this.pid1 = res.praise[0].id;
						this.pid2 = res.praise[1].id;
						this.pid3 = res.praise[2].id;
						// 热度榜
						this.sales1 = res.sales[0].image
						this.sales2 = res.sales[1].image
						this.sales3 = res.sales[2].image
						this.rId1 = res.sales[0].id;
						this.rId2 = res.sales[1].id;
						this.rId3 = res.sales[2].id;
						console.log('热度榜', res);
						// this.navClass=res
					}
				});
			},
			// 猜你喜欢
			getGuessLike() {
				this.$api.get({
					url: '/wanlshop/product/likes?page=index',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
						console.log('猜你喜欢1', this.likeData);
						console.log('猜你喜欢', res);
						// this.navClass=res
					}
				});
			},
			// 头部轮播图
			getSwiper() {
				this.$api.get({
					url: '/wanlshop/common/bannerList',
					// data: {

					// },
					success: res => {
						this.swiperImg = res
						console.log('轮播图', res);
						// this.navClass=res
					}
				});
			},
			// 调用判断是否是客户还是设计师
			getDC() {
				if(this.is_DC==1){
					this.$api.get({
						url: '/wanlshop/user/getDC',					
						success: res => {
							this.is_DC=res.is_DC;						
							this.$store.commit('user/is_DC', res.is_DC);
							 console.log('设计师', res);
							// this.navClass=res
						}
					});
				}
				
			}
		},
		
		
		onLoad() {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			// 调用导航分类数据
			this.nav();
			// 调用热度榜
			this.getHeatList();
			// 调用猜你喜欢函数
			this.getGuessLike();
			// 调用头部轮播图函数
			this.getSwiper();
			
			
		},
		onShow() {
			var user = uni.getStorageSync("wanlshop:user");
			if(this.is_DC=="" || this.is_DC==1 || this.is_DC==0){
				this.is_DC = user.is_DC;
				console.log('is_DCdf',this.is_DC)
			}					
			this.getDC();
			var user = this.$store.state.user;
			// this.is_DC=user.is_DC;
			console.log('userasd',user.is_DC)
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 判断网络类型
			uni.getNetworkType({
				success: (res) => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					} else if (res.networkType == 'none') {
						this.$wanlshop.msg('没有网络');
					}
				}
			});
		}
	}
</script>

<style lang="scss">
	.home {

		.home_nav {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			// height: 150rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 9999;

			&_search {
				position: relative;
				margin-left: 15rpx;
				background: #eeeeee;
				width: 400rpx;
				height: 60rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;


				image {
					width: 27rpx;
					height: 27rpx;
					// position: absolute;
					// left: 100rpx;
					// top: 10rpx;
				}

				.search {
					font-size: 26rpx;
					color: #ababab;
					margin-left: 10rpx;
				}

				input {
					line-height: 50rpx;
					height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					border-radius: 50rpx;
					padding-left: 5rpx;
					background: #eeeeee;

				}
			}
		}

		// 中间内容部分
		&_content {
			width: 720rpx;
			margin: 0 auto;

			// 头部轮播图
			&_swiper {
				width: 720rpx;
				height: 200rpx;
				// background-color: pink;
				border-radius: 8rpx;

				.search-swiper {
					// background-color: pink;
					height: 200rpx;

					image {
						width: 720rpx;
						height: 200rpx;
						border-radius: 8rpx;

					}
				}


			}

			&_classification {
				margin-top: 30rpx;
				// height: 200rpx;
				width: 720rpx;
				// background-color: red;

				&_top {
					// background-color: #81e4a6;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					margin-bottom: 10rpx;

					.layout_flex {
						// align-items: center;
						width: 130rpx;
						// background-color: pink;
						text-align: center;
						margin-bottom: 30rpx;

						image {
							width: 80rpx;
							height: 80rpx;
						}

						.text {
							font-size: 25rpx;
							color: #282828;
						}
					}

				}
			}

			&_3D {
				width: 720rpx;
				height: 150rpx;

				// background-color: red;
				image {
					width: 720rpx;
					height: 150rpx;
					border-radius: 8rpx;
				}
			}

			// 热度榜口碑榜
			&_Heat {
				// background-color: pink;
				margin: 30rpx 0;
				display: flex;
				justify-content: space-between;

				&_list {
					width: 350rpx;
					height: 370rpx;
					background-image: url(../../../static/image/images/koubeiditu.png);
					background-size: 350rpx 370rpx;
					padding: 15rpx;
					box-sizing: border-box;

					.hot {
						// background-color: red;
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;

						}

						text {
							margin-left: 15rpx;
							font-size: 26rpx;
							color: #ffb115;
						}
					}

					.top1 {
						width: 320rpx;
						height: 130rpx;
						margin: 20rpx auto 10rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}

						.top1_postion {
							position: absolute;
							top: 0;
							left: 0;
							width: 110rpx;
							height: 40rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.top_bottom {
						width: 320rpx;
						margin: 0 auto;
						display: flex;
						justify-content: space-between;

						.top_bottom_left {
							width: 155rpx;
							height: 150rpx;
							position: relative;

							image {
								width: 100%;
								height: 100%;
								border-radius: 12rpx;
							}

							.top2 {
								position: absolute;
								top: 0;
								left: 0;
								width: 110rpx;
								height: 40rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

				}
			}
		}

		// 猜你喜欢
		&_bottom {
			background-color: #f8f8f8;
			width: 100%;
			// height: 500rpx;
			// margin-bottom: 30rpx;

			.home_bottom_fover {

				text-align: center;

				// background-color: pink;
				image {
					margin: 20rpx 0;
					width: 400rpx;
					height: 30rpx;
				}
			}

			&_shopping {
				width: 720rpx;
				margin: 0 auto 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				// background-color: red;


				&_shopping1 {
					width: 350rpx;
					// height: 250px;
					background-color: #FFFFFF;
					border-radius: 8rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					.image {
						width: 350rpx;
						height: 250rpx;
						border-radius: 8rpx 8rpx 0 0;
					}

					.introduce {
						// background-color: red;
						font-size: 26rpx;
						// width: 350rpx;
						margin: 15rpx 10rpx;
						// 多行显示超出部分显示省略号
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
					}

					.price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 0 3rpx;
						// background-color: red;
						padding-bottom: 15rpx;

						.price_left {

							.money1 {
								font-size: 24rpx;
								color: #da2625;
							}

							.money2 {
								font-size: 30rpx;
								color: #da2625;
							}

							.money3 {
								font-size: 24rpx;
								color: #c0c0c0;
								text-decoration: line-through;
								margin-left: 3rpx;
							}


						}

						.price_right {
							font-size: 24rpx;
							color: #c0c0c0;
						}
					}
				}
			}
		}
	}
</style>
